/*
一、对象分解
    1、我方飞机对象
    2、敌方飞机对象
    3、子弹对象
    4、生成飞机子弹的继承对象

二、功能分解
    1、我方飞机：移动、发射子弹、死亡
    2、敌方飞机：移动、死亡
    3、子弹：移动、消失
*/

let back = document.querySelector('.gameback');
let span = document.querySelector('.gameback i');
let backMove = 0;

class Bule {
  //继承类---生成DOM元素
  constructor(w, h, x, y, url, dieUrl) {
    this.w = w;
    this.h = h;
    this.x = x;
    this.y = y;
    this.dieUrl = dieUrl;
    this.url = url;
  }
  creatImg() {
    this.imgs = document.createElement('img');
    this.imgs.src = this.url;
    this.imgs.style.cssText = `width:${this.w}px;height:${this.h}px;position:absolute;top:${this.y}px;left:${this.x}px;`;
    back.appendChild(this.imgs);
  }
}
class Myplan extends Bule {
  //我方飞机类
  constructor(w, h, x, y, url, dieUrl) {
    super(w, h, x, y, url, dieUrl);
    this.creatImg();
    this.myMove();
  }
  myMove() {
    let _this = this;
    document.addEventListener('keydown', Move);

    function Move(ev) {
      let e = ev || window.event;
      // console.log(e.keyCode);
      switch (e.keyCode) {
        case 87:
          moveUp();
          break;
        case 83:
          moveDown();
          break;
        case 65:
          moveLeft();
          break;
        case 68:
          moveRight();
          break;
        case 75:
          addBiu();
          break;
      }
    }

    function moveUp() {
      clearInterval(_this.imgs.timerDown);
      clearInterval(_this.imgs.timerUp);
      _this.imgs.timerUp = setInterval(() => {
        _this.y -= 4;
        if (_this.y <= 0) {
          _this.y = 0;
        }
        _this.imgs.style.top = _this.y + 'px';
      }, 1000 / 60);
    }
    function moveDown() {
      clearInterval(_this.imgs.timerUp);
      clearInterval(_this.imgs.timerDown);
      _this.imgs.timerDown = setInterval(() => {
        _this.y += 4;
        if (_this.y >= back.offsetHeight - _this.h) {
          _this.y = back.offsetHeight - _this.h;
        }
        _this.imgs.style.top = _this.y + 'px';
      }, 1000 / 60);
    }
    function moveLeft() {
      clearInterval(_this.imgs.timerRight);
      clearInterval(_this.imgs.timerLeft);
      _this.imgs.timerLeft = setInterval(() => {
        _this.x -= 4;
        if (_this.x <= 0) {
          _this.x = 0;
        }
        _this.imgs.style.left = _this.x + 'px';
      }, 1000 / 60);
    }
    function moveRight() {
      clearInterval(_this.imgs.timerLeft);
      clearInterval(_this.imgs.timerRight);
      _this.imgs.timerRight = setInterval(() => {
        _this.x += 4;
        if (_this.x >= back.offsetWidth - _this.w) {
          _this.x = back.offsetWidth - _this.w;
        }
        _this.imgs.style.left = _this.x + 'px';
      }, 1000 / 60);
    }

    document.addEventListener('keyup', cleaMove);
    function cleaMove(ev) {
      let e = ev || window.event;
      // console.log(e.keyCode);
      switch (e.keyCode) {
        case 87:
          clearInterval(_this.imgs.timerUp);
          break;
        case 83:
          clearInterval(_this.imgs.timerDown);
          break;
        case 65:
          clearInterval(_this.imgs.timerLeft);
          break;
        case 68:
          clearInterval(_this.imgs.timerRight);
          break;
        case 75:
          clearInterval(_this.imgs.biutimer);
          flag = true;
          break;
      }
    }

    let flag = true;
    function addBiu(e) {
      if (flag) {
        _this.imgs.biutimer = setInterval(() => {
          new Biu(
            6,
            14,
            _this.x + _this.w / 2 - 2,
            _this.y - 14,
            '../img/bullet.png'
          );
        }, 150);
        flag = false;
        new Biu(
          6,
          14,
          _this.x + _this.w / 2 - 2,
          _this.y - 14,
          '../img/bullet.png'
        );
      }
    }
  }
}
class Diplan extends Bule {
  //敌方飞机类
  constructor(w, h, x, y, url, dieUrl, speen, boole, scor) {
    super(w, h, x, y, url, dieUrl);
    this.scor = scor; //移动速度
    this.speen = speen; //分数
    this.boole = boole;
    this.creatImg();
    this.diMove();

    this.imgs.className = 'di';
  }

  diMove() {
    let _this = this;
    this.imgs.timer = setInterval(() => {
      this.y += this.speen;
      if (this.y >= back.offsetHeight) {
        this.imgs.remove();
        clearInterval(this.imgs.timer);
      }
      this.imgs.style.top = this.y + 'px';
      if (
        this.x <= myplan.x + myplan.w &&
        this.x + this.w >= myplan.x &&
        this.y <= myplan.y + myplan.h &&
        this.y + this.h >= myplan.y
      ) {
        // alert('游戏结束');
        clearInterval(backtimer);
        clearInterval(dinum);
        let bius = document.querySelectorAll('.biu');
        for (let i = 0; i < bius.length; i++) {
          clearInterval(bius[i].timer);
        }
        let difangs = document.querySelectorAll('.di');
        for (let i = 0; i < difangs.length; i++) {
          clearInterval(difangs[i].timer);
        }

        myplan.imgs.src = myplan.dieUrl;
        setTimeout(() => {
          alert('游戏结束！');
          location.reload(true);
        }, 100);
      }
    }, 1000 / 60);
    this.imgs.boole = this.boole;
    this.imgs.rumming = function () {
      this.boole--;
      if (this.boole === 0) {
        this.className = '';
        span.innerHTML = window.parseInt(span.innerHTML) + _this.scor;
        clearInterval(this.timer);
        this.src = _this.dieUrl;
        setTimeout(() => {
          this.remove();
        }, 200);
      }
    };
  }
}
class Biu extends Bule {
  //子弹类
  constructor(w, h, x, y, url) {
    super(w, h, x, y, url);
    this.creatImg();
    this.biuMove();
    this.imgs.className = 'biu';
  }
  biuMove() {
    this.imgs.timer = setInterval(() => {
      this.y -= 4;
      if (this.y <= -this.h) {
        this.imgs.remove();
        clearInterval(this.imgs.timer);
      }
      //碰撞检测---子弹每次运动都需要和所有敌机做检测
      let dis = document.querySelectorAll('.di');
      for (let i = 0; i < dis.length; i++) {
        if (
          this.x <= dis[i].offsetLeft + dis[i].offsetWidth &&
          this.x + this.w >= dis[i].offsetLeft &&
          this.y <= dis[i].offsetTop + dis[i].offsetHeight &&
          this.y + this.h >= dis[i].offsetTop
        ) {
          clearInterval(this.imgs.timer);
          this.imgs.remove();
          dis[i].rumming();
        }
      }
      this.imgs.style.top = this.y + 'px';
    }, 1000 / 60);
  }
}

const rannum = function (min, max) {
  return window.parseInt(Math.random() * (max - min + 1) + min);
};

let nanDu = document.querySelector('.nanduxuanze');
let ps = document.querySelectorAll('.nanduxuanze p');
let myplan;

let backtimer;
let dinum;
for (let i = 0; i < ps.length; i++) {
  switch (i) {
    case 0:
      ps[i].addEventListener('click', state(0, 3));
      break;
    case 1:
      ps[1].addEventListener('click', state(1, 5));
      break;
    case 2:
      ps[2].addEventListener('click', state(2, 6));
      break;
    case 3:
      ps[3].addEventListener('click', state(3, 7));
      break;
  }
}

function state(min, max) {
  return function () {
    nanDu.style.display = 'none';
    backtimer = setInterval(() => {
      backMove += 4;
      back.style.backgroundPosition = `0px ${backMove}px`;
    }, 1000 / 60);
    myplan = new Myplan(
      66,
      80,
      (back.offsetWidth - 66) / 2,
      back.offsetHeight - 80,
      '../img/myplane.gif',
      '../img/midplaneboom.gif'
    );

    dinum = setInterval(() => {
      for (let i = 0; i < rannum(min, max); i++) {
        let num = rannum(1, 20);
        if (num < 12) {
          new Diplan(
            34,
            24,
            rannum(0, back.offsetWidth - 34),
            -24,
            '../img/smallplane.png',
            '../img/smallplaneboom.gif',
            rannum(1, 5),
            1,
            1
          );
        } else if (num >= 12 && num <= 18) {
          new Diplan(
            46,
            60,
            rannum(0, back.offsetWidth - 46),
            -60,
            '../img/midplane.png',
            '../img/midplaneboom.gif',
            rannum(1, 4),
            3,
            5
          );
        } else {
          new Diplan(
            110,
            164,
            rannum(0, back.offsetWidth - 110),
            -164,
            '../img/bigplane.png',
            '../img/bigplaneboom.gif',
            rannum(1, 3),
            6,
            10
          );
        }
      }
    }, 1500);
  };
}
